<template>
    <div class="top">
        <div class="tops">
            <div class="box"></div>
            <div class="box">稼动率</div>
            <div class="box">开动率</div>
            <div class="box">生产型号</div>
            <div class="box">工作中</div>
            <div class="box">运行中</div>
            <div class="box">停机中</div>
            <div class="box">待机中</div>
            <div class="box">离线中</div>
            <div class="box"></div>
        </div>
        <div class="tops">
            <div class="box">
                <div class="boxs">实际</div>
                <div class="boxs">目标</div>
            </div>
            <div class="box">
                <div class="boxs font">{{ data.jiadonglv | toFixed }}%</div>
                <div class="boxs fonts">80%</div>
            </div>
            <div class="box ">
                <div class="font">{{ data.kaidonglv * 100 | toFixed }}%</div>
                <div class="fonts">90%</div>
            </div>
            <div class="box font">{{ data.devIdCount }}</div>
            <div class="box font">{{ data.workCount }}</div>
            <div class="box font">{{ data.yunxingCount }}</div>
            <div class="box font">{{ data.tingjiCount }}</div>
            <div class="box font">{{ data.daiJiCount }}</div>
            <div class="box font">{{ data.lixianCount }}</div>
            <div class="box font"></div>
            
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {

    name: 'Top',
    data() {
        return {
            data: '',
        }
    },
    mounted() {
    },
    created() {
        this.getTop();
    },
    methods: {
        getTop() {
            axios.get('http://192.168.12.66/drillingOperation/getDrillingOperationStats', {
            })
                .then(response => {
                    this.data = response.data;
                    console.log(this.data);
                })
                .catch(error => {
                    this.error = error;
                });
        }
    }
}
</script>
<style lang="less" scoped>
.top {
    top: 0;
    left: 0;
    .tops {
        display: flex;
        .box {
            flex: 1;
            margin-top: 5px;
            display: grid;
            place-items: center;
            .boxs {
                margin-top: 5px;
            }
            .font {
                color: blue;
            }
            .fonts {
                color: rgb(33, 184, 33);
            }
        }
        .font {
                color: blue;
            }
    }
}
</style>